<template>
  <div id="home">
    <nav-bar>
      <template v-slot:default>图书星弟</template>
    </nav-bar>
    <!-- 返回顶部 -->
    <back-top @bTop="bTop" v-show="isTabFix" />
    <!-- 选项卡悬浮 -->
    <tab-control v-show="isTabFix" :titles="['畅销', '精选', '新书']" @tabClick="tabClick" />
    <!-- 滑动插件 -->
    <div class="wrapper">
      <div class="content">
        <div ref="banref">
          <!-- banner -->
          <home-swiper :banner="slides" />
          <!-- 图书列表 -->
          <reco-view :recommends="recommends" />
        </div>
        <!-- 选项卡 -->
        <tab-control v-show="!isTabFix" :titles="['畅销', '精选', '新书']" @tabClick="tabClick" />
        <!-- 商品列表 -->
        <goods-list :goods="showGoods" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed, watchEffect, nextTick } from "vue";
import NavBar from "components/common/navbar/NavBar";
import BackTop from "components/common/backtop/BackTop";
import RecoView from "./components/RecoView";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from "components/content/goods/GoodsList";
import HomeSwiper from "./components/HomeSwiper.vue";
import { getHomeAll, getHomeGoods } from "network/home.js";
import BScroll from "better-scroll";
import { useStore } from "vuex";

export default {
  setup() {
    const recommends = ref([]);
    const slides = ref([]);
    const store = useStore();
    let bscroll = reactive({});
    let isTabFix = ref(false);
    let banref = ref(null);

    console.log("++++++++++", store.getters.getIsLogin);

    // 商品列表数据模型
    const goods = reactive({
      sales: { page: 1, list: [], load: true },
      recommend: { page: 1, list: [], load: true },
      new: { page: 1, list: [], load: true },
    });

    let currentType = ref("sales"); // 当前选择类型

    let showGoods = computed(() => {
      return goods[currentType.value].list;
    });

    onMounted(() => {
      getHomeAll().then((res) => {
        recommends.value = res.goods.data;
        slides.value = res.slides;
      });
      getHomeGoods("sales").then((res) => {
        goods.sales.list = res.goods.data;
      });
      getHomeGoods("recommend").then((res) => {
        goods.recommend.list = res.goods.data;
      });
      getHomeGoods("new").then((res) => {
        goods.new.list = res.goods.data;
      });

      // 创建BScroll对象
      bscroll = new BScroll(document.querySelectorAll(".wrapper")[0], {
        probeType: 3, // 0 1 2 3.只要在运动就触发事件
        click: true, // 允许点击
        pullUpLoad: true, // 上拉加载更多
      });

      // 滚动触发事件
      bscroll.on("scroll", (position) => {
        isTabFix.value = -position.y > banref.value.offsetHeight;
      });
      // 上拉加载
      bscroll.on("pullingUp", async () => {
        console.log("上拉加载");
        console.log(
          `当前类型：${currentType.value}, 当前状态：${
            goods[currentType.value].load
          }`
        );
        if (!goods[currentType.value].load) return;

        const page = goods[currentType.value].page + 1;
        await getHomeGoods(currentType.value, page).then((res) => {
          goods[currentType.value].list.push(...res.goods.data);
          goods[currentType.value].page += 1;
          if (res.goods.data.length == 0) goods[currentType.value].load = false;
        });

        bscroll.finishPullUp(); // 结束上拉加载行为

        bscroll.refresh();
        console.log(`当前类型：${currentType.value}, 当前页数：${page}`);
      });
    });

    const tabClick = (index) => {
      let type = ["sales", "recommend", "new"];
      currentType.value = type[index];
      nextTick(() => {
        bscroll && bscroll.refresh();
        bscroll && bscroll.finishPullUp();
      });
    };

    const bTop = () => {
      bscroll.scrollTo(0, 0, 500);
    };

    // 监听数据变化
    watchEffect(() => {
      nextTick(() => {
        // 重新计算高度
        bscroll && bscroll.refresh();
      });
    });

    return {
      recommends,
      slides,
      tabClick,
      goods,
      showGoods,
      isTabFix,
      banref,
      bTop,
    };
  },
  components: {
    NavBar,
    RecoView,
    TabControl,
    GoodsList,
    BackTop,
    HomeSwiper,
  },
};
</script>

<style lang="scss">
#home {
  position: relative;
  height: 100vh;
  .wrapper {
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 56px;
    overflow: hidden;
  }
}
</style>
